<template>
  <view class="order-box">
    <view class="address-box">
      <view class="info-top">
        <view class="row-header"><text>收货地址</text></view>
        <view class="row1">
          <text>收件人:</text>
          <text>{{orderDetail.name}}</text>
        </view>
        <view class="row2">
          <text>手机号:</text>
          <text>{{orderDetail.phone}}</text>
        </view>
        <view class="row3">
          <text>收货地址：</text>
          <text>{{orderDetail.pca}}/{{orderDetail.address}}</text>
        </view>
      </view>
    </view>

    <view class="goods-item">
      <view class="item-row1"><text>待支付</text></view>
      <view class="item-row2" v-for="(item,index) in orderDetail.list" :key='index'>
        <view class="item-middle">
      			<image :src="item.thumbnail" style="width: 100%;height: 100%;" mode=""></image>
      		</view>
        <view class="item-right">
          <text class="item-title">{{item.name}}</text>
          <text class="item-volume">
            <text>数量:{{item.count}}</text>
            <text>规格：{{item.standardName}}</text>
          </text>
          <text class="item-money">
            <text class="money" v-if="item.price>0">￥{{item.price}}/</text>
            <text class="point" v-if="item.score>0">{{item.score}}积分</text>
          </text>
        </view>
      </view>
    </view>

    <view class="goods-pay">
      <view class="row1">
        <text class="goodsprice">商品价格</text>
        <text class="money">￥{{orderDetail.finishCashAmount}}</text>
      </view>
      <view class="row2">
        <text class="spend">运费</text>
        <text class="free">免配送费</text>
      </view>
      <view class="row3">
        <text class="paypoint">支付积分</text>
        <text class="point">{{orderDetail.finishScoreAmount}}积分</text>
      </view>
    </view>

    <!-- <view class="paysetting-box">
      <view class="paysetting-item">
        <view class="row-header"><text>选择支付方式</text></view>
        <view class="row1">
          <view class="row1-left"><text>余额支付</text></view>
          <view class="row1-right">
            <text>可用余额：￥12.95</text>
            <radio value="" color="#E3C475" class="radio" />
            <text></text>
          </view>
        </view>
        <view class="row2">
          <view class="row1-left"><text>积分支付</text></view>
          <view class="row1-right">
            <text>可用积分：7500</text>
            <radio value="" color="#E3C475" class="radio" />
          </view>
        </view>
        <view class="row3">
          <view class="row1-left"><text>微信支付</text></view>
          <view class="row1-right">
            <radio value="" color="#E3C475" class="radio" />
            <text></text>
          </view>
        </view>
      </view>
    </view> -->
    <view class="pay">
      <text class="cancle" @click="cancleOrder">取消订单</text>
      <text class="paynow" @click="sure">立即支付</text>
    </view>
		<pay :show="payShow" @close="payCloseFunc" @emitPassword="emitPassword"></pay>
  </view>
</template>

<script>
	import pay from '../../../components/payPassword/pay_Password.vue'
export default {
  data() {
    return {
		orderDetail:{},
		orderId:'',
		payShow:false,
		yueObj:{}
	};
  },
  components:{
	  pay
  },
  methods:{
	  payCloseFunc() {
	  	this.payShow = false
	  },
	  cancleOrder(item,index){
	  	uni.showModal({
	  		title: '提示',
	  		content: '确定取消订单？',
	  		showCancel: true,
	  		cancelText: '取消',
	  		confirmText: '确定',
	  		success: res => {
	  			if(res.confirm){
	  				this.$ajax('api/Order/Cancel',{id:this.orderId}).then(res => {
	  					uni.showToast({
	  						title: '取消成功'
	  					});
	  					uni.navigateBack({
	  						
	  					})
	  				})
	  			}
	  		},
	  		fail: () => {},
	  		complete: () => {}
	  	});
	  	
	  },
	  emitPassword(e){
	  	this.$ajax('api/Member/VerificationPayPassword',{payPassword:e}).then(res => {
	  		this.$ajax('api/Order/Pay',this.yueObj).then(pose => {
	  			uni.showToast({
	  				title: '支付成功'
	  			});
	  			uni.navigateTo({
	  				url:'../user/order/order'
	  			})
	  		})
	  		this.payShow =false
	  	})
	  },
	  sure(){
	  	let that = this
	  	uni.showActionSheet({
				itemList: ['余额支付','微信支付','购物券支付'],
				success: tap => {
					
					let obj = {
						id:this.orderId,
						category:10
					}
					if(tap.tapIndex == 0 || tap.tapIndex == 2){
						obj.category = tap.tapIndex == 0 ? 10 : 30
	  				that.yueObj = obj
	  				if(this.$store.state.isSetpassword){
	  					that.payShow = true
	  				}else{
	  					that.$ajax('api/Order/Pay',that.yueObj).then(pose => {
	  						uni.showToast({
	  							title: '支付成功'
	  						});
	  						uni.navigateBack({
	  							
	  						})
	  					})
	  				}
	  				// that.$ajax('api/Order/Pay',obj).then(pose => {
	  				// 	uni.showToast({
	  				// 		title: '支付成功'
	  				// 	});
	  				// 	uni.navigateTo({
	  				// 		url:'../user/order/order'
	  				// 	})
	  				// })
	  			}else{
	  				obj.category = 20
	  				that.$ajax('api/Order/Pay',obj).then(pose => {
	  					const result = pose.Data;
	  					uni.requestPayment({
	  						timeStamp: result.timeStamp,
	  						nonceStr: result.nonceStr,
	  						package: result.package,
	  						signType: result.signType,
	  						paySign: result.paySign,
	  					
	  						success: function(res) {
	  							uni.showToast({
	  								title: '支付成功',
	  								duration: 3000,
	  								icon: 'none'
	  							});
	  						uni.navigateBack({
	  							
	  						})
	  						},
	  						fail: function(err) {
	  							uni.showModal({
	  								content: '支付已取消',
	  								showCancel: false
	  							});
	  							console.log('fail:' + JSON.stringify(err));
	  						}
	  					});
	  				})
	  			}
	  			
	  		},
	  		fail: () => {},
	  		complete: () => {}
	  	});
	  },
  },
  onLoad(e) {
  	this.$ajax('api/Order/QueryDetail',{id:e.id}).then(res => {
		this.orderDetail = res.Data
	})
	this.orderId = e.id
  }
};
</script>

<style lang="scss">
.order-box {
  width: 100vw;
  min-height: 100vh;
  padding: 1px 0 0;
  background-color: #e9eaed;
  // padding: 27rpx 27rpx 0 27rpx;
  &>view{
	  margin-left: auto;
	  margin-right: auto;
  }
  .address-box {
    width: 690rpx;
    height: 252rpx;
    background-color: #ffffff;
    border-radius: 26rpx;

    .info-top {
      margin: 20rpx  32rpx 0;
      display: flex;
      flex-direction: column;
      .row-header {
        display: flex;
        margin: 28rpx 0 22rpx 0;
        text {
          color: #333333;
          font-size: 30rpx;
          font-weight: 700;
        }
      }
      text {
        font-size: 26rpx;
        color: #333;
      }
      .row1 {
        display: flex;
        margin-bottom: 22rpx;
      }
      .row2 {
        display: flex;
        margin-bottom: 22rpx;
      }
      .row3 {
        display: flex;
        margin-bottom: 22rpx;
      }
    }
  }
  .goods-item {
    width: 690rpx;
    height: 314rpx;
    background-color: #ffffff;
    margin-top: 25rpx;
    border-radius: 26rpx;
    display: flex;
    position: relative;
    flex-direction: column;
    .item-row1 {
      margin-top: 30rpx;
      // height: 88rpx;
      padding-bottom: 30rpx;
      box-sizing: border-box;
      border-bottom: 1rpx solid #c4c4c4;
      text {
        font-size: 30rpx;
        font-weight: 700;
        margin-left: 30rpx;
        color: #333333;
      }
    }
    .item-row2 {
      display: flex;
      .item-middle {
        width: 150rpx;
        height: 150rpx;
        background-color: #aeaeae;
        margin-top: 25rpx;
        margin-left: 35rpx;
      }
      .item-right {
        display: flex;
        flex-direction: column;
        margin-left: 47rpx;
        .item-title {
          color: #333;
          font-size: 28rpx;
          margin-top: 36rpx;
        }
        .item-money {
          font-size: 26rpx;
          margin-top: 10rpx;
		  padding-right: 30rpx;
          display: flex;
          // margin-bottom: 21rpx;
          .money {
            color: #333;
          }
          .point {
            color: #e0bc60;
            margin-right: 33rpx;
          }
        }
        .item-volume {
          color: #999999;
          font-size: 24rpx;
          display: flex;
          margin-top: 20rpx;
          text {
            margin-right: 8rpx;
          }
        }
      }
    }
  }
  .goods-pay {
    width: 690rpx;
    height: 270rpx;
    background-color: #ffffff;
    border-radius: 26rpx;
    margin-top: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 33rpx 28rpx;
    box-sizing: border-box;
    .row1 {
      display: flex;
      justify-content: space-between;
      text {
        color: #333333;
        font-size: 28rpx;
      }
    }
    .row2 {
      display: flex;
      justify-content: space-between;
      // border-bottom: 1rpx solid #c4c4c4;
      // padding-bottom: 46rpx;
      margin-top: 42rpx;
      text {
        color: #333333;
        font-size: 28rpx;
      }
    }
    .row3 {
      display: flex;
      justify-content: space-between;
      margin-top: 32rpx;
      .paypoint {
        font-weight: 700;
        color: #333333;
        font-size: 28rpx;
      }
      .point {
        display: flex;
        // color: #e0bc60;
        font-weight: 700;
        font-size: 28rpx;
        .pay-point {
          color: #e0bc60;
        }
      }
    }
  }
  .paysetting-box {
    height: 318rpx;
    background-color: #ffffff;
    width: 690rpx;
    margin-top: 27rpx;
    border-radius: 26rpx;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .paysetting-item {
      margin-right: 30rpx;
      padding-left: 30rpx;
      padding-top: 23rpx;
      .row-header,
      .row1,
      .row2,
      .row3 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .radio {
          transform: scale(0.7);
        }
        text {
          font-size: 26rpx;
          color: #333;
        }
      }
      .row-header { 
        color: #333333;
        font-weight: 700;
        font-size: 28rpx;
      }
      .row1, .row2, .row3 {
        height: 69rpx;
        border-bottom: 1rpx solid #E5E5E5;
      }
    }
  }
  .pay {
    // margin-top: 112rpx;
    display: flex;
    height: 98rpx;
    width: 100%;
	position: fixed;
	bottom: 0;
    text {
      flex: 50%;
      font-size: 30rpx;
      color: #FFFFFF;
      font-weight: 700;
      line-height: 98rpx;
      text-align: center;
    }
    .cancle {
      background-color: #D2D2D2;
    }
    .paynow {
      background-color: #202029;
    }
  }
}
</style>
